<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="static/easyui/themes/bootstrap/easyui.css">
<link rel="stylesheet" type="text/css" href="static/easyui/themes/icon.css">
<link rel="stylesheet" href="static/css/style.css" />
<link rel="stylesheet" href="static/css/tcommon.css" />
<script src="static/jquery/jquery-1.12.4.js"></script>
<script src="static/easyui/jquery.easyui.min.js"></script>
<script src="static/easyui/locale/easyui-lang-zh_CN.js"></script>
<title>摄像头</title>
</head>

<body>
	<div class="content-container" data-options="region:'center'">
		<div class="panel-header">
			<div class="panel-title">摄像头列表</div>
		</div>
		<table id="pro_table" class="easyui-datagrid" style="height: 100%">
		</table>

		<div id="pro_tb">
			<div class="search-input">
				项目：
				<input style="width: 200px;" id="projectitemid" name="projectitemid" class="easyui-combobox"
					editable="false"
					data-options="
						    valueField: 'id',
						    textField: 'name',
						    url: 'projectitemuserlist.do',
						    onLoadSuccess : function(data){ 
							   	if(data.length>0){
							   		$('#projectitemid').combobox('setValue',data[0].id);
						    	}
						    },
						    onSelect: function(rec){
					    		projectitemid = rec.id;
						    	if(rec.projectitemchilds.length>0){
									var url = 'projectitemchildlist?projectitemid=' + rec.id;
									$('#projectitemchildid').combobox('reload', url);
									document.getElementById('div1').style.display = '';
						    	}else{
						    		projectitemchildid = 0;
									$('#projectitemchildid').combobox('clear');
									document.getElementById('div1').style.display = 'none';
									loadData();
						    	}
						    },panelHeight: 'auto'">
			</div>
			<div id="div1" style="display: none;" class="search-input">
				子项目：
				<input style="width: 200px;" id="projectitemchildid" name="projectitemchildid" class="easyui-combobox"
					editable="false"
					data-options="
						    valueField: 'id',
						    textField: 'name',
						    loadFilter: function (data) {
						        var obj = {};
						        obj.id = '';
						        obj.name = '全部';
						        data.splice(0, 0, obj);
						        return data;
						    },
						    onSelect: function(rec){
						    	projectitemchildid = rec.id;
								loadData();
						    },panelHeight: 'auto'">
			</div>
			<div>
				<a href="javascript:void(0)" class="d-btn btn-blue" onclick="newpro()">添加</a>
				<a href="javascript:void(0)" class="d-btn btn-green" onclick="updatepro()">编辑</a>
				<a href="javascript:void(0)" class="d-btn btn-red" onclick="deletepro()">删除</a>
			</div>
		</div>
	</div>
	<div id="proDlg" class="easyui-dialog info_dialog" style="width: 800px; padding: 10px 20px; top: 30px;"
		closed="true" buttons="#pro-dlg-buttons">
		<div class="title"></div>
		<form id="proFm" method="post">
			<div class="content_container">
				<table class="content_table">
					<tr>
						<td style="width: 100px;">项目</td>
						<td style="width: 250px;">
							<input style="width: 200px;" id="projectitem" name="projectitem" class="easyui-combobox"
								editable="false"
								data-options="
							    valueField: 'id',
							    textField: 'name',
							   	required:true,
							    url: 'projectitemlist.do',
							    onSelect: function(rec){
								    if(rec.projectitemchilds.length>0){
										document.getElementById('tr1').style.display = '';
										document.getElementById('tr2').style.display = '';
										var url = 'projectitemchildlist?projectitemid=' + rec.id;
										$('#projectitemchild').combobox('reload', url);
								    }else{
										document.getElementById('tr1').style.display = 'none';
										document.getElementById('tr2').style.display = 'none';
							    	}
							    },panelHeight: 'auto'">
						</td>
						<td id="tr1" style="display: none;">子项目</td>
						<td id="tr2" style="display: none;">
							<input style="width: 200px;" id="projectitemchild" name="projectitemchild" class="easyui-combobox"
								editable="false"
								data-options="
							    valueField: 'id',
							    textField: 'name',
							    onSelect: function(rec){
							    },panelHeight: 'auto'">
						</td>
					</tr>
					<tr>
						<td style="width: 100px;">序列号：</td>
						<td>
							<input class="easyui-textbox" data-options="required:true" id="no" name="no" style="width: 200px;" />
						</td>
						<td style="width: 100px;">名称：</td>
						<td>
							<input class="easyui-textbox" data-options="required:true" id="name" name="name" style="width: 200px;" />
						</td>
					</tr>
					<tr>
						<td style="width: 100px;">地点：</td>
						<td>
							<input class="easyui-textbox" data-options="required:true" id="location" name="location"
								style="width: 200px;" />
						</td>
					</tr>
					<tr>
						<td style="width: 100px;">直播：</td>
						<td>
							<input class="easyui-textbox" data-options="required:true" id="url" name="url" style="width: 200px;" />
						</td>
						<td style="width: 100px;">封面：</td>
						<td>
							<input class="easyui-textbox" data-options="required:true" id="image" name="image"
								style="width: 200px;" />
						</td>
					</tr>
				</table>
			</div>
		</form>
	</div>
	<div id="pro-dlg-buttons">
		<a href="# " class="easyui-linkbutton ok" onclick="savePro()">保存</a>
		<a href="# " class="easyui-linkbutton btn-cancel " onclick="javascript:$('#proDlg').dialog('close')">关闭</a>
	</div>
</body>
<script th:inline="javascript">
	var cameraTime =[[${cameraTime}]];
	var currentPro;
	var projectitemid;
	var projectitemchildid;
	function loadData() {
		if (projectitemchildid > 0){
			$('#pro_table').datagrid({
				rownumbers : true,
				singleSelect : true,
				pagination : true,
				fitColumns : false,
				border : false,
				striped : true,
				toolbar : '#pro_tb',
				url : "cameras.do",
				method : 'get',
				queryParams : {
					projectitemchildid : projectitemchildid
				},
				onSelect : function(index,row) {
					currentPro = row;
				},
				onDblClickRow : function(index,row) {
					currentPro = row;
					updatepro();
				},
				columns : [ [ {
					field : 'no',
					title : '序列号',
					width : ''
				},{
					field : 'name',
					title : '名称',
					width : ''
				},{
					field : 'location',
					title : '地点',
					width : ''
				},{
					field : 'handle',
					title : '操作',
					width : '100px',
					formatter : function(value,row,index) {
						return '<a class="c-orange" href="#" onclick="addTab(' + index + ')">进入监控</a>'
					}
				} ] ]
			});
		}else{
			$('#pro_table').datagrid({
				rownumbers : true,
				singleSelect : true,
				pagination : true,
				fitColumns : false,
				border : false,
				striped : true,
				toolbar : '#pro_tb',
				url : "cameras.do",
				method : 'get',
				queryParams : {
					projectitemid : projectitemid
				},
				onSelect : function(index,row) {
					currentPro = row;
				},
				onDblClickRow : function(index,row) {
					currentPro = row;
					updatepro();
				},
				columns : [ [ {
					field : 'no',
					title : '序列号',
					width : ''
				},{
					field : 'name',
					title : '名称',
					width : ''
				},{
					field : 'location',
					title : '地点',
					width : ''
				},{
					field : 'handle',
					title : '操作',
					width : '100px',
					formatter : function(value,row,index) {
						return '<a class="c-orange" href="#" onclick="addTab(' + index + ')">进入监控</a>'
					}
				} ] ]
			});
		}
	}
	function newpro() {
		$("#proDlg").dialog('open').dialog('setTitle', '添加摄像头');
		$("#proFm").form('clear');
		currentPro = {};
		$("#projectitem").combobox("enable");
		$("#projectitemchild").combobox("enable");
		document.getElementById('tr1').style.display = 'none';
		document.getElementById('tr2').style.display = 'none';
		$("#pro-dlg-buttons").find(".easyui-linkbutton.ok").show();
	}
	function updatepro() {
		currentPro = $("#pro_table").datagrid('getSelected');
		if (currentPro){
			$("#proDlg").dialog('open').dialog('setTitle', '更新摄像头');
			$("#projectitem").combobox("setValue", currentPro.projectitemid);
			$("#projectitem").combobox("disable");
			if (currentPro.projectitemchildid != null){
				$("#projectitemchild").combobox("setValue", currentPro.projectitemchildid);
				$("#projectitemchild").combobox("disable");
			}
			$("#proFm").form('load', {
				no : currentPro.no,
				name : currentPro.name,
				location : currentPro.location,
				url : currentPro.url,
				image : currentPro.image
			});
		}else{
			$.messager.alert('更新', '请选择要更新的摄像头', 'warning');
		}
	}
	function deletepro() {
		currentPro = $("#pro_table").datagrid('getSelected');
		if (currentPro){
			$.messager.confirm("操作提示", "您确定要执行操作吗？", function(data) {
				if (data){
					$.ajax({
						type : 'DELETE',
						url : "CameraDelete.do?id=" + currentPro.id,
						contentType : "application/json",
						success : function(data) {
							if (data.success){
								$.messager.show({
									title : '删除',
									msg : '删除成功',
									timeout : 5000,
									showType : 'slide'
								});
								loadData();
							}else{
								$.messager.alert('删除', '删除失败', 'error');
							}
						},
						dataType : "json"
					});
				}
			});
		}else{
			$.messager.alert('警告', '请选择要删除的预算', 'warning');
		}
	}
	function savePro() {
		if (!$("#proFm").form('validate'))
			return;
		currentPro.projectitemid = $("#projectitem").combobox('getValue');
		var projectchildid = $("#projectitemchild").combobox('getValue');
		if (projectchildid != null){
			currentPro.projectitemchildid = projectchildid;
		}
		currentPro.name = $("#name").textbox('getValue');
		currentPro.no = $("#no").textbox('getValue');
		currentPro.url = $("#url").textbox('getValue');
		currentPro.location = $("#location").textbox('getValue');
		currentPro.image = $("#image").textbox('getValue');
		$.ajax({
			type : 'POST',
			url : "CameraSave.do",
			data : JSON.stringify(currentPro),
			contentType : "application/json",
			success : function(data) {
				if (data.success){
					$.messager.show({
						title : '保存摄像头',
						msg : '保存摄像头成功',
						timeout : 5000,
						showType : 'slide',
					});
					loadData();
				}else{
					$.messager.alert('保存摄像头', '保存摄像头失败', 'error');
				}
				$('#proDlg').dialog('close');
			},
			dataType : "json"
		});
	}
	function addTab(index) {
		var item = $("#pro_table").datagrid('getRows')[index];
		var title = '监控-' + item.name;
		if(item.dailytime<cameraTime.dailytime*60){
			window.parent.window.addTab(title, "imouplayer.do?cameraid=" + item.id, item.id);
		}else{
			$.messager.alert('警告', '今日观看时间已超时');
		}
	}
</script>

</html>